
<template>
    <div>
      <div class="top">
        <ul>
          <li class="el-icon-s-home"><a href="">首页</a></li>
          <li class="el-icon-collection"><a href="">商城</a></li>
          <li><a href="">我的订单</a></li>
          <li>关于我们</li>
        </ul>
      </div>
      <div class="bottom">
        <div class="w">
          <div class="aa">
            <img src="../assets/01.png" alt="">
            <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
              <!--<el-submenu index="2">-->
                <!--<template slot="title">目录</template>-->
                <!--<el-menu-item index="2-1">-->
                  <!--<p>主题市场</p>-->
                  <!--<ul>-->
                    <!--<li v-for="shop in data">-->
                      <!--{{shop.name}}-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</el-menu-item>-->
              <!--</el-submenu>-->
            <!--</el-menu>-->
          </div>
          <div class="zz">
            <div>
              <input type="text" placeholder="防晒衣">
              <span class="el-icon-search"></span>
            </div>
            <div>
              <span class="el-icon-chat-line-round"><small>消息</small></span>
              <span class="el-icon-star-off"><small>收藏</small></span>
              <span class="el-icon-shopping-cart-2"><small>购物车</small></span>
              <span class="el-icon-s-shop"><small>下载APP</small></span>
            </div>
            <div>
              <p ><span class="el-icon-help"></span><span><a href="#/ZhucePage">注册</a></span>
                <span class="el-icon-help"></span><span><a href="#/LoginPage">登录</a></span>
              </p>

            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {}
        }
    }
</script>

<style scoped>
  body{
    background: #fff;
  }
  .top{
    overflow: hidden;
    border-bottom: solid 1px #999999;
    background: #fff;
  }
  .top ul{
  overflow: hidden;
  float: right;
  margin-right: 80px;
}
  .top ul li{
    float: left;
    font-size: 14px;
    padding: 5px 10px;
    color:#999999;
  }
  .top ul li a{
    font-size: 14px;
    color:#999999;
    border-right: solid 1px #999999;
    padding-right:20px;
  }
  [class*=" el-icon-"], [class^="el-icon-"]{
    line-height: normal;
  }


  .bottom{
   background: #fff;
  }
  .bottom .w{
    width:90% ;
    overflow: hidden;
    height: 100px;
    margin: 0 auto;
  }
  .bottom .aa{
    overflow: hidden;
    /*background: coral;*/
    margin-top: 10px;
    margin-left: -4%;
    /*margin: 0 auto;*/
    float: left;
    width: 300px;
  }
  .bottom .aa img{
    /*float: left;*/
    position: relative;
    width: 150px;
    height: 100px;
    margin-top: -10px;
    cursor: pointer;
  }
  .bottom .zz{
    /*display: block;*/
    float: left;
    margin-top: 25px;
    margin-left: 4%;
  }
  .bottom .zz div:first-child{
    margin-left: 200px;
    float: left;
  }
  .bottom .zz div:first-child input{
    width:650px ;
    height: 50px;
    background: #f7f7f7;
    border: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 10px;
  }
  .bottom .zz div:first-child span{
    width: 60px;
    height: 50px;
    background:#8d8d8d ;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: -5px;
    padding: 17px;
  }
  .bottom .zz div:nth-child(2){
    float: left;
    margin-left: 20px;
  }
  .bottom .zz div:nth-child(2) span{
    width: 50px;
    font-size: 25px;
    /*margin: 10px;*/
  }
  .bottom .zz div:nth-child(2) span small{
    font-size: 12px;
    display: inline-block;
    width: 50px;
    position: relative;
    bottom: 7px;
  }
  .bottom .zz div:last-child{
    float: left;
    font-size: 18px;
    margin-left: 100px;
    margin-top: 10px;
  }
  .top .zz div:last-child span:first-child{
    /*display: inline-block;*/
    /*width: 38px;*/
    /*height: 38px;*/
    /*font-size: 40px;*/
    /*background: #ffe1e7;*/
    /*!*border-radius: 50%;*!*/
    /*padding-top: 10px;*/
    /*margin-right:5px ;*/

  }
  .zz p a{
    color:#000;
  }
  .el-menu{
    position: relative;
    top:-80px;
    right: -240px;
    cursor: pointer;
  }
  .el-menu-item{
    width: 400px;
    background: coral;
  }
  .el-menu-item li{
    float: left;
  }
  .el-menu-horizontal {
    display: inline-block !important;
  }

</style>
